<script setup>
import { computed, reactive, ref } from 'vue';


const isActive = ref(true)
const hasError = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'    
}))

const styleObject2 = reactive({
    display: ['-webkit-box', '-ms-flexbox', 'flex']
})

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})



</script>
<template>
    <h1>AttributeBind</h1>
    <div class="static" :class="{ active: isActive, 'text-danger': hasError }" :style="styleObject2">
        Test-Text
    </div>
    <div :class="classObject" :style="styleObject">
        Test-Text2
    </div>
</template>
<style scoped>
</style>